<!-- 管理员列表 -->
<template>
  <div>
    <h1>管理员管理</h1>
    <hr>
    <el-button type="primary" class="add" @click="add">添加账号</el-button>




    <el-table :data="quanXianList" style="width: 100%">
      <el-table-column label="管理员账号" width="180">
        <template slot-scope="scope">
          <el-popover placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.username }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="上次登录时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.last_login_time }}</span>
        </template>
      </el-table-column>

      <el-table-column label="邮箱" width="180">
        <template slot-scope="scope">
          <el-popover placement="top">
            <p>邮箱: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.email }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="是否可用">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" v-show="scope.row.is_enable"
            @click="updateEnable1(scope.row.id)">可用</el-button>
          <el-button size="mini" type="primary" v-show="!scope.row.is_enable"
            @click="updateEnable(scope.row.id)">不可用</el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="adminUpade(scope.row)"> 修改权限</el-button>
          <el-button size="mini" type="primary" @click="update(scope.row)"> 编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteAdmin(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="pageDiv">
      <el-pagination background layout="prev, pager, next" :total="pageCount" :page-size="pageSize"
        @current-change="currentChange">
      </el-pagination>
    </div>
  </div>
</template>

  <script>
export default {
  created() {
    //列表渲染
    this.getList(this.page, this.pageSize);
  },
  data() {
    return {
      quanXianList: [],
      page: 1,
      pageSize: 5,
      pageCount: 0,
      bukeyong:null,
      a:false,
    }
  },
  methods: {
    adminUpade() {
      this.$router.push('/setting/permissionmgr/update')
    },
    update(a) {
      this.$router.push({ name: 'setting:permissionmgr:add', params: { data: a } })
    },
    // 添加用户按钮
    add() {
      this.$router.push('/setting/permissionmgr/add')

    },
    // 列表渲染函数
    getList(page, pageSize) {

      this.$http({
        url: '/admin/selectAll',
        method: 'POST',
        params: {
          page,
          pageSize
        }
      })
        .then((res) => {
          // console.log('权限列表数据', res)
          this.quanXianList = res.data.data
          this.pageCount = res.data.count
        })
        .catch((err) => {
          console.log('权限列表请求失败', err)

        })
    },
    //分页
    currentChange(page) {
      console.log('分页',page)
      this.page = page;
      this.getList(page, this.pageSize)
    },
    // 修改为可用
    updateEnable(id) {
      
      this.$http({
        url: '/admin/updateEnable',
        method: 'GET',
        params: {
          id,
          isEnable:true,
        }
      })
        .then(() => {
          // console.log('修改是否可用成功', res)
          //列表渲染
          this.getList(this.page, this.pageSize);

        })
        .catch(() => {
          // console.log('修改是否可用失败', err)

        })
    },
     // 修改为不可用
    updateEnable1(id) {
      
      this.$http({
        url: '/admin/updateEnable',
        method: 'GET',
        params: {
          id,
          isEnable:false,
        }
      })
        .then((res) => {
          console.log('修改是否可用成功', res)
          //列表渲染
          this.getList(this.page, this.pageSize);

        })
        .catch((err) => {
          console.log('修改是否可用失败', err)

        })
    },
    //删除管理员/admin/delete
    deleteAdmin(id) {

      this.$http({
        url: '/admin/delete',
        method: 'GET',
        params: {
          id
        }
      })
        .then((res) => {
          console.log('删除管理员', res)
          //列表渲染
          this.getList(this.page, this.pageSize);
        })
        .catch((err) => {
          console.log('删除管理员失败', err)

        })
    },
  }
}
</script>
<style lang="scss" scoped>
 h1 {
    font-size: 30px;
  }

  hr {
    margin: 20px 0 0px 0;
    border-top: 2px solid rgba(128, 128, 128, 0.753);
  }
.add {
  margin: 20px 0px 20px 0;
}

.pageDiv {
  margin: 50px 0 0 0;
  text-align: center;
}
</style>



<!-- <template>
  <div>
    <h1>角色权限配置</h1>
    <div>
      <el-radio v-model="radio" label="1">普通用户</el-radio>
      <el-radio v-model="radio" label="2">管理员</el-radio>
    </div>
    <div>
      权限配置:
      <el-checkbox v-model="checked">Banner页面管理</el-checkbox>
      <el-checkbox v-model="checked">客户管理</el-checkbox>
      <el-checkbox v-model="checked">订单管理</el-checkbox>
      <el-checkbox v-model="checked">客户管理</el-checkbox>
      <el-checkbox v-model="checked">优惠券与积分</el-checkbox>
      <el-checkbox v-model="checked">内容管理</el-checkbox>
      <el-checkbox v-model="checked">保险管理</el-checkbox>
      <el-checkbox v-model="checked">评价管理</el-checkbox>
      <el-checkbox v-model="checked">退款</el-checkbox>
      <el-checkbox v-model="checked">第三方管理</el-checkbox>
      <el-checkbox v-model="checked">设置</el-checkbox>
      <el-checkbox v-model="checked">只可见自己的订单</el-checkbox>
    </div>
    <el-button
      type="primary"
      class="chaXun"
      @click="adminAdd(username, ruleForm.pass, email)"
      >保存</el-button
    >
    <el-button type="primary" class="chaXun" @click="returnList"
      >取消</el-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "1",
    };
  },
};
</script>

<style lang="scss" scoped>
div {
  margin: 30px 0 30px 0;
}
.el-checkbox {
  margin: 30px 20px 30px 20px;
}
</style> -->